/**
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { fetchUser } from '../../api';
import createPlainComponent from '../../utils/createPlainComponent';

const render = (target, { username }) => {
  const renderLoadingPlaceholder = createPlainComponent(
    '<div class="user-data__content">Loading...</div>',
  );
  const element = renderLoadingPlaceholder(target);

  fetchUser(username).then(response => {
    const userFound = response.status === 200;
    const data = response.data;

    const template = userFound
      ? `<ul>
          ${data.name ? `<li>Name: ${data.name}</li>` : ''}
          <li>ID: ${data.id}</li>
          ${
            data.bio ? `<li>Bio: ${data.bio}</li>` : ''
          }                                
          ${
            data.location ? `<li>Location: ${data.location}</li>` : ''
          }                                
          ${
            data.email
              ? `<li>Email: <a href="mailto:${data.email}">${
                  data.email
                }</a></li>`
              : ''
          }                                
          ${
            data.blog
              ? `<li>Blog: <a href="${data.blog}">${data.blog}</a></li>`
              : ''
          }                                
          <li>Full profile: <a href="https://github.com/${username}">https://github.com/${username}</a></li>
        </ul>`
      : 'No such user!';

    const renderInfo = createPlainComponent(template);

    element.querySelector('.user-data__content').innerHTML = '';
    renderInfo(element.querySelector('.user-data__content'));
  });
};

export default render;
